import React, { Component } from 'react'
import axios from "./utils/axios"
import Header from './components/Header'
import Main from './components/Main'
import Footer from './components/Footer'
export class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
       list:[],
     
    }
  }
componentDidMount() { 
  axios.get("/list").then(res=>{
    this.setState({
      list:res.data
    })
  })
 }
add(val){
  let {list} =this.state
  list.push({
    id:new Date().getTime(),
    title: val,
    "state":false
  })
  this.setState({
    list:list
  })
}
changeState(id){
  let {list} =this.state
  list.forEach((item)=>{
    if(item.id===id){
        item.state=!item.state
    }
  
  })
  this.setState({
    list:list
  })

}
  del=(id)=>{
   let {list}=this.state
  //  list.forEach((item,index)=>{
  //    if(item.id==id){
  //        list.splice(1,index)
  //    }
  //  })
  list =list.filter((item)=>{
    return item.id!==id
  })
  this.setState({
    list:list
  })

}

  render() { 
    const {list}=this.state
    return (
      <div className='App'>
        <Header ></Header>
        <Main list={list} 
        add={this.add.bind(this)}
         del={this.del}
         changestate={this.changeState.bind(this)
         }
         ></Main>
        <Footer list={list}></Footer>
      </div>
    )
  }
}

export default App
